<template>
<!--  整个头部-->
  <div style="height:100px;padding-bottom: 10px;padding-top:10px;flex: auto;
  border-bottom: 1px solid cornflowerblue;display:flex;overflow-y:auto;background-color: rgba(0,191,255,0.2);
              ">
<!--    background-color: rgba(0,191,255,0.2);-->
<!--    opacity: 20% 设置整个组件的透明度-->
<!--    左-->
    <img style="margin-left: 15%" src="https://i.loli.net/2021/08/13/EXYCabP1jDVxqvg.jpg" alt="Decorative Icon" width="90" height="79">
    <div style="height:79px;display:flex;
    margin-left: 20%;font-weight: bolder;
    color: lightpink;font-family: 仿宋;font-size: xxx-large">
      管理界面
    </div>
    <img style="margin-left: 20%" src="https://i.loli.net/2021/08/13/1S2bjyzeoMw9fD5.jpg" alt="Decorative Icon" width="90" height="79">
<!--    调整控件,flex规定项目将相对于其他灵活的项目自动进行改变-->
    <div style="flex: 1">
  </div>
<!--      右-->
    <div style="width:150px;padding-top:30px;">
<!--      下拉框-->
      <el-dropdown style="color: blueviolet;">
        <span class="el-dropdown-link" style="font-size: large">
         管理员{{ admin.name }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu style="padding-right: 1px;color: blueviolet">
            <el-dropdown-item style="color: blueviolet" @click="$router.push('/adminEdit')">账户资料</el-dropdown-item>
            <el-dropdown-item style="color: blueviolet" @click="$router.push('/login')">登出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>

export default {
  name: "Header",
  data(){
    return{
      admin:{},
    }
  },
  created() {
    let str = sessionStorage.getItem("admin") || "{}"
    this.admin = JSON.parse(str)
  }
}
</script>

<style scoped>

</style>